<template>
<view>
 <view class="collection-xiangqing" v-for="(item, index) in imageList"
             :key="index">
			
   <view id="btn">
        <button>赠与</button>
      </view>
      <view id="img">
      <image mode="aspectFill" :src="item.src"></image>
      <text>{{item.text}}</text>
      </view>
      <view id="icon">
          <uni-icons type="locked" color="#D3D3D3"></uni-icons>
      </view>
      <view id="time">
       <text>获得时间</text>  
       <text>{{item.time}}</text>
      </view>
      <view id="footer">
        <button>寄售</button>
      </view>
      <view>
     <uni-pagination :show-icon="true" :total="2"  />
      </view>
 </view>

</view>
</template>
<script>
	export default {
		data() {
			return {
				imageList:[
					{
					id:1,
					name:'呵呵',
					
					src:'http://rco8i11co.hn-bkt.clouddn.com/1.jpg'	,
					text:'《动物世界》',
					time:'2022-02-01 09:23:23'
					},
					// {
					// id:2,
					// name:'呵呵1',
					
					// src:'http://rco8i11co.hn-bkt.clouddn.com/2.jpg'	,
					// text:'《动物世界2》',
					// time:'2022-02-01 09:23:23'
					// },
					// {
					// id:3,
					// name:'呵呵2',
					// fans:100,
					// src:'http://rco8i11co.hn-bkt.clouddn.com/3.jpg'	,
					// text:'《动物世界2》'
					// },
					// {
					// id:4,
					// name:'呵呵3',
					// fans:200,
				 //    src:'http://rco8i11co.hn-bkt.clouddn.com/4.jpg'	,
					// text:'《动物世界2》'
					// },
				]
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	.collection-xiangqing{
	    width: 750rpx;
	    height: 500rpx;
	/*    background-color: pink; */
	}
	/* #header{
	    width: 750rpx;
	   height: 200rpx;
	 
	    border-bottom:1px  grey solid;
	} */
	#btn button{
	  background-color: red;
	  width: 70px;
	  height: 30px;
	  line-height: 30px;
	  border-radius: 20px;
	  color: azure;
	  font-size: small;
	  margin-top: 10px;
	  margin-bottom: 10px;
	  margin-right: 28px;
	}
	#img image{
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    margin:auto;
	}
	#img text{
	    display: flex;
	    justify-content: center;
	    color: #fff;
	    border-radius: 15px;
	    width: 80px;
	    height: 30px;
	    line-height: 30px;
	    margin-left: 30px;
	    margin-top: -30px;   
	}
	#icon{
	    margin-top: 10px;
	    margin-left: 30px;
	
	}
	#time{
	    margin-left: 30px;
	    margin:20px 0 auto;
	    justify-content: space-around;
	    display: flex;
	    flex-direction: row;
	    border-bottom: 1px #AAAAAA solid;
	}
	#time text{
	    color: #AAAAAA;
	    margin-bottom: 20px;  
	}
	#footer button{
	    margin-top: 20px;
	    font-size: 14px;
	    width: 120px;
	    height: 35px;
	    line-height: 35px;
	    border-radius: 20px;
	    color: #fff;
	    background-color: #AAAAAA
	
	}


</style>